<template>
  <div class="list-item-row">
    <div class="list-item">{{ options.doctorName || '' }}</div>
    <div class="list-item item-room">{{ options.consultName || '' }}</div>
    <div class="list-item item-curr">
      <span v-for="(row, i) in sliceArr(options.waitPatientInfo, 1, 'curr')" :key="i">{{ row.registerId }}&nbsp;&nbsp;{{ row.patientName }}</span>
    </div>
    <div class="list-item item-wait">
      <vue-seamless-scroll
        class="wait-scroll"
        :key="rollKey"
        :data="sliceArr(options.waitPatientInfo)"
        :class-option="classOption(4, 2)"
        @ScrollEnd="handleScrollEnd()"
      >
        <ul class="clearfix">
          <li v-for="(item, i) in sliceArr(options.waitPatientInfo)" :key="i">{{ item.registerId }}&nbsp;&nbsp;{{ item.patientName }}</li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import { handlerLimited } from '@/utils';
import { v4 as uuid } from 'uuid';
export default {
  name: 'msgWin',
  props: {
    options: {
      type: Object
    }
  },
  data() {
    return {
      rollKey: uuid()
    };
  },
  components: {
    vueSeamlessScroll
  },
  mounted() {},
  methods: {
    handleScrollEnd() {
      this.rollKey = uuid();
    },
    sliceArr(arr, max = 50, type = 'wait') {
      let rs = [];
      if (type === 'curr') {
        rs = this.filterCurrPatient(arr);
      } else if (type === 'wait') {
        rs = this.filterWaitArr(arr);
      } else {
        rs = arr;
      }
      return handlerLimited(rs, max);
    },
    // 过滤当前就诊患者
    filterCurrPatient(arr) {
      arr = arr || [];
      return arr.filter((item) => item && item.sort == 0);
    },
    // 过滤等候患者
    filterWaitArr(arr) {
      arr = arr || [];
      let waitArr = arr.filter((item) => item?.sort != 0);
      return waitArr.sort((a, b) => {
        // 处理 sort 属性不存在或为null或undefined 的情况
        const sortA = a?.sort ?? 0;
        const sortB = b?.sort ?? 0;
        return sortA - sortB;
      });
    },
    classOption(lens, direction = 1) {
      return {
        autoPlay: true,
        step: 1.2, // 数值越大速度滚动越快
        openTouch: false,
        limitMoveNum: lens, // 开始无缝滚动的数据量
        direction: direction // 0向下 1向上 2向左 3向右
      };
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/assets/styles/wait.scss';
</style>
